<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layout 管理界面大布局示例 - Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="static/css/layui.css" rel="stylesheet">
  <link href="static/css/home.css" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black shouye">layout demo</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <!-- 移动端显示 -->
      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
      </li>
      <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 1</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 2</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 3</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">nav groups</a>
        <dl class="layui-nav-child">
          <dd><a href="javascript:;">menu 11</a></dd>
          <dd><a href="javascript:;">menu 22</a></dd>
          <dd><a href="javascript:;">menu 33</a></dd>
        </dl>
      </li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
        <a href="javascript:;">
          <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
          tester
        </a>
        <dl class="layui-nav-child">
          <dd><a href="javascript:;">Your Profile</a></dd>
          <dd><a href="javascript:;">Settings</a></dd>
          <dd><a href="javascript:;">Sign out</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
    </ul>
  </div>
  <div class="layui-layout layui-layout-admin">
    <div class="layui-side layui-bg-black">
      <div class="layui-side-scroll">
        <ul class="layui-nav layui-nav-tree">
          <li class="layui-nav-item layui-nav-itemed">
            <a href="javascript:;">默认展开</a>
            <dl class="layui-nav-child">
              <dd><a href="javascript:;" data-content="content1">选项1</a></dd>
              <dd><a href="javascript:;" data-content="content2">选项2</a></dd>
              <dd><a href="javascript:;" data-content="content3">选项3</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item">
            <a href="javascript:;">默认收缩</a>
            <dl class="layui-nav-child">
              <dd><a href="javascript:;" data-content="content4">选项1</a></dd>
              <dd><a href="javascript:;" data-content="content5">选项2</a></dd>
              <dd><a href="javascript:;" data-content="content6">选项3</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item"><a href="javascript:;">菜单1</a></li>
          <li class="layui-nav-item"><a href="javascript:;">菜单2</a></li>
          <li class="layui-nav-item"><a href="javascript:;">菜单3</a></li>
        </ul>
      </div>
     
    </div>
    <div class="layui-body">
      <!-- 内容主体区域 -->
      <div style="padding: 15px;">
        <blockquote class="layui-elem-quote layui-text">
          框体布局内容主体区域
        </blockquote>
        <div class="layui-card layui-panel">
          <div class="layui-card-header">
            单接口自动化校验,只需要上传符合格式excel等待执行结果即可
          </div>
            <div style="margin-left: 15px;">
              <button type="button" class="layui-btn"><a href="static/interface.xlsx"  download="interface.xlsx" >下载Excel模板</a></button>
              <button type="button" class="layui-btn" id="ID-upload-demo-files-action">开始上传</button>
            </div>
          <div class="layui-card-body">
            <div id="content0" class="content-item layui-show">
              <div class="layui-upload" >
                <!-- 将拖拽上传区域添加到此处 -->
                <div class="layui-upload-drag" id="ID-upload-demo-drag" >
                  <i class="layui-icon layui-icon-upload"></i> 
                  <div>点击上传，或将文件拖拽到此处</div>
                  <div class="layui-hide" id="ID-upload-demo-preview">
                    <hr> <img src="" alt="上传成功后渲染" style="max-width: 100%">
                  </div>
                </div>
                <div class="layui-upload-list">
                  <table class="layui-table">
                    <colgroup>
                      <col style="min-width: 100px;">
                      <col width="150">
                      <col width="260">
                      <col width="150">
                    </colgroup>
                    <thead>
                      <th>文件名</th>
                      <th>大小</th>
                      <th>上传进度</th>
                      <th>操作</th>
                    </thead>
                    <tbody id="ID-upload-demo-files-list"></tbody>
                  </table>
                </div>
                
              </div>
              <p style="border: 1px solid gray ; height: 200px;" class="test_result"></p>
              
      
            </div>
            <div id="content1" class="content-item">
              <div class="default-content" style="height: 100vh; width: 100vw;">
                <ul>
                  <li><a class="wangjiaxing" href="#">今日头条</a></li>
                  <li><a class="wangjiaxing1" href="#">默认</a></li>
                </ul>
              </div>
              <div class="iframe-container" style="height:680px;width:100vw;">
                <iframe class="content-iframe" src="about:blank"></iframe>
              </div>
            </div>
            <div id="content2" class="content-item">
              内容2
              <div class="default-content" style="height: 100vh; width: 100vw;">
                <ul>
                  <li><a class="wangjiaxing" href="#">今日头条</a></li>
                  <li><a class="wangjiaxing1" href="#">默认</a></li>
                </ul>
              </div>
              <div class="iframe-container" style="height:680px;width:100vw;">
                <iframe class="content-iframe" src="about:blank"></iframe>
              </div>
            </div>
            <div id="content3" class="content-item">内容3</div>
            <div id="content4" class="content-item">内容4</div>
            <div id="content5" class="content-item">内容5</div>
            <div id="content6" class="content-item">内容6</div>
          </div>
        </div>
      </div>
      <br><br>
    </div>
  </div>
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    底部固定区域
  </div>
</div>
 
<script src="static/layui.js"></script>
<script src="static/home.js"></script>

</body>
</html>
